<template>
	<list-layout class="system-message-list margin25">
		<Form slot="table-search" :model="queryCondition" :label-width="75" inline @submit.native.prevent>
			<FormItem label="消息内容">
				<Input v-model="queryCondition['content:LIKE']" placeholder="请输入"/>
			</FormItem>
			<FormItem label="消息类型">
				<Select v-model="queryCondition.type" placeholder="全部" style="width: 172px;" clearable>
					<Option value="message-system">系统消息</Option>
					<Option value="message-trade">交易消息</Option>
				</Select>
			</FormItem>
			<FormItem label="消息时间">
				<DatePicker v-model="queryCondition.createTime" type="datetimerange"
				            format="yyyy-MM-dd HH:mm"
				            placeholder="请选择"
				            style="width: 305px"/>
			</FormItem>

			<FormItem :label-width="0">
				<Button type="primary" @click="queryHandler()">搜索</Button>
				<Button @click="resetQueryCondition(true)">重置</Button>
			</FormItem>
		</Form>

		<Table slot="table" :columns="columns" :data="page.data" border stripe>
			<template #type="{row}">{{row.type === 'message-system' ? '系统' : '交易'}}消息</template>
		</Table>

		<Page slot="page" :total="page.total" @on-change="onPageNumChange" @on-page-size-change="onPageSizeChange"/>
	</list-layout>
</template>

<script>
import JBoot, {Utils} from "jboot-env";

const columns = Object.freeze([
	{title: '消息内容', key: 'content',tooltip:true, ellipsis: true, align: 'left',},
	{title: '消息类型', slot: 'type', align: 'center', width: 130},
	{title: '消息时间', key: 'createTime', align: 'center', width: 185},
]);

export default JBoot.page({
	data (){
		return {
			moduleName: 'message',
			columns
		}
	},

	methods: {
		getQueryCondition (params){
			const {createTime, ...condition} = this.queryCondition;

			const queryParam = {...condition, ...params};

			if(createTime && createTime.length > 0){
				queryParam['createTime:GTE'] = Utils.formatDate(createTime[0], 'yyyy-MM-dd hh:mm');
				queryParam['createTime:LTE'] = Utils.formatDate(createTime[1], 'yyyy-MM-dd hh:mm');
			}

			return queryParam;
		},
	}
});
</script>

<style lang="scss" scoped>
.system-message-list {

}
</style>
